Trong bài học đầu tiên này, học viên sẽ ôn lại một số kiến thức cơ bản về phát triển web, bao gồm các thẻ HTML mặc định cần thiết, cách liên kết với tệp CSS và cách chọn thẻ bằng thuộc tính. Học viên cũng sẽ tìm hiểu về mã màu CSS và áp dụng vào việc tạo một cầu vồng bằng mã.
Trong bài học này, học viên bắt đầu rèn luyện kỹ năng cần thiết để tạo bố cục trang web chuyên nghiệp. Một khái niệm quan trọng cần nắm vững là mối quan hệ cha-con trong các thẻ HTML lồng nhau và cách sử dụng nó trong CSS. Học viên sẽ thực hành lồng ghép thẻ HTML bằng cách xây dựng một hộp cho chú mèo Happy và một bộ giường cho chú mèo Grumpy.
Học viên sẽ học cách tạo menu điều hướng cơ bản bằng cách sử dụng các phần tử HTML <nav> và danh sách. Họ sẽ tiếp tục khám phá mối quan hệ cha-con trong HTML và được giới thiệu về kế thừa CSS. Nhiệm vụ của họ là giúp Cecile xây dựng thực đơn cho trang web nhà hàng của cô ấy.
Trong bài học này, học viên được giới thiệu về các thẻ ngữ nghĩa HTML5. Họ sẽ tìm hiểu các phần tiêu chuẩn trong mẫu thiết kế trang web phổ biến nhất và sử dụng các thẻ phù hợp để tạo chúng: <header>, <main>, và <footer>. Khi xây dựng trang web tin tức “Sue’s News”, học viên cũng sẽ học về thẻ <article>, <aside> và cách tạo cột bằng phần trăm trong CSS.
Học viên bắt đầu ôn tập các khái niệm đã học bằng cách xây dựng một trang web cho công ty “Weird Widget Company”. Đầu tiên, họ sẽ tạo cấu trúc trang bằng thẻ HTML5, sau đó mã hóa và tạo kiểu cho menu điều hướng, cuối cùng thêm thông báo giảm giá vào phần chân trang.
Học viên hoàn thành trang web “Weird Widget Company” bằng cách thực hành tạo cột với phần trăm khi thêm các sản phẩm độc đáo và hài hước vào trang web. Họ sẽ hoàn thiện trang web bằng cách xoay và tạo hiệu ứng động cho linh vật của công ty – một con gà cao su lộn ngược.
Sau khi học viên đã có thể tạo bố cục trang web tiêu chuẩn, họ sẽ bắt đầu làm cho bố cục trở nên linh hoạt hơn. Học viên tìm hiểu về truy vấn phương tiện (media queries), một kỹ thuật CSS cho phép thay đổi bố cục dựa trên kích thước màn hình. Họ sẽ sử dụng công cụ kiểm tra mã trên trình duyệt để xem trang web hiển thị trên nhiều thiết bị khác nhau. Dự án của họ là tạo trang web về vòng đời của loài ếch, từ trứng trên điện thoại đến ếch trưởng thành trên màn hình máy tính.
Không có bộ kỹ năng bố cục nào hoàn chỉnh nếu thiếu lưới (grid). Trong bài học này, học viên sẽ tìm hiểu về thiết kế lưới trong web và mô-đun CSS Flexbox. Khi thêm lưới cửa sổ vào một tòa nhà trung tâm thành phố, họ sẽ quan sát hành vi đặc biệt của các phần tử flexbox và thử nghiệm các thuộc tính điều chỉnh khoảng cách theo chiều dọc và ngang.
Sau khi thành thạo Flexbox, học viên sẽ học cách làm cho lưới trở nên linh hoạt hơn. Họ sẽ thực hành trên một trang web hiển thị ảnh của những cái cây độc đáo trên thế giới. Họ sử dụng media queries để hiển thị một cột trên điện thoại, hai cột trên máy tính bảng, ba cột trên màn hình lớn và một chú sóc trang trí.
Học viên sẽ khám phá thiết kế menu trên trang web dành cho thiết bị di động, xem xét các yêu cầu giao diện khác nhau trên thiết bị cảm ứng và cách tối ưu hóa không gian màn hình nhỏ. Họ sẽ học cách mã hóa các biểu tượng để tạo thêm không gian cho các thao tác chạm. Dự án của họ là xây dựng một thanh tab cố định (sticky menu) cho trang web về cây cối, sau đó điều chỉnh nó để hiển thị tốt trên màn hình lớn.
Học viên bắt đầu làm dự án cuối cùng – một trang web trò chơi có tên “Guards of Dragono”. Trước tiên, họ sử dụng công cụ kiểm tra mã để xác định các phần tử cần làm cho linh hoạt hơn. Họ bắt đầu bằng cách tổ chức nội dung theo lưới đáp ứng và hoàn thiện phiên bản di động của menu điều hướng.
Trong bài học cuối cùng, học viên hoàn thành trang web “Guards of Dragono” bằng cách thêm một phần “hero” ấn tượng – phần đầu trang mà người dùng nhìn thấy ngay mà không cần cuộn xuống. Họ làm cho phần này trở nên linh hoạt hơn và cuối cùng, thêm một hiệu ứng động với rồng bay trên trang chủ.